<template>
  <div class="mortgageNdx noVipContent">
    <div v-if="!mortgageListHidden">
      <!-- 抵押Ndx -->
      <div class="mortgage" v-if="MortgageStatus === 1">
        <div class="font333" style="margin: -28px 0 30px">{{ $t('ndxStake.stake') }}</div>
        <!-- table 切换 -->
        <div class="mortgageTabs flexb">
          <div class="tab"
          v-for="(item, index) in activeList" :key="index"
          @click="handleActiveAction(item)"
          :class="{'active' : item.value === active}">
            {{item.label}}
          </div>
        </div>
        <div class="mt10">
          <div v-if="!active">
            <div class="flexb" style="margin-bottom: 3px;">
              <span class="font999">{{$t('ndxStake.youStake')}}</span>
              <!-- <el-tooltip v-if="stakeOrtherNumber" effect="light"
              :content="`其中 ${toFixed(stakeOrtherNumber - selfStakeNumber, 4)} NDX 由他人抵押`" placement="top">
                <i class="iconfont icon-huaban" style="cursor: pointer;"></i>
              </el-tooltip> -->
              <span>{{$t('ndxStake.own')}}：{{ toFixed(selfStakeNumber, 4)}} NDX</span>
            </div>
            <div class="flexb mb5">
              <span class="font999" v-if="stakeOrtherNumber || stakeOrtherNumber === 0">{{toFixed(stakeOrtherNumber, 4)}} NDX</span>
              <span v-else><i class="el-icon-refresh el-icon-loading"></i>NDX</span>
              <span>{{$t('ndxStake.others')}}：{{ (stakeOrtherNumber - selfStakeNumber).toFixed(4) }} NDX</span>
            </div>
            <!-- <div v-if="parseFloat(stakeNumber) && parseFloat(totalStaked)">
              {{ $t('ndxStake.proportion') }}{{ ((parseFloat(stakeNumber) / parseFloat(totalStaked)) * 100).toFixed(4) >= 0.001 ?
              ((parseFloat(stakeNumber) / parseFloat(totalStaked)) * 100).toFixed(4):
              ((parseFloat(stakeNumber) / parseFloat(totalStaked)) * 100).toFixed(8)}}%
            </div> -->
          </div>
        </div>
        <div v-if="chain === 'eos' && active" class="mt10">
          {{$t('ndxStake.stakedForOther')}}：
          <span v-if="stakeNumber - selfStakeNumber">{{toFixed(stakeNumber - selfStakeNumber, 4)}}</span>
          <span v-else>0.0000</span> NDX
          <a class="colorBlue ml5" v-if="(stakeNumber - selfStakeNumber)" @click="mortgageListHidden = true;">{{$t('ndxStake.redeem')}}</a>
        </div>
        <el-input
          type="number"
          clearable
          :placeholder="$t('ndxStake.tipStake')"
          class="mortgageNumber"
          min="0.0001"
          step="0.0001"
          v-model="ndxStakeNumber" />
        <div class="flexb">
          <div class="el-form-item__error" v-if="numberError"> ≥ {{minNdxStakeNumber}}</div>
          <span v-else>&nbsp;</span>
          <div class="ableUse">
            {{ $t('ndxStake.mortgable') }}
            <span @click="ndxStakeNumber = toFixed(ndxCanStakeBlance, 4)"
            v-if="ndxCanStakeBlance!==null && chain === 'eos'">{{toFixed(ndxCanStakeBlance,4)}}</span>
            <span v-else-if="ndxCanStakeBlance!==null"> 0.0000 </span>
            <i v-if="ndxCanStakeBlance===null && chain === 'eos'" class="el-icon-refresh el-icon-loading"></i> NDX
          </div>
        </div>
        <div v-if="active" :class="{'mb':active}">
          <div class="flexb">
            <div class="accountList">
              <span class="el-dropdown-link">
                <!-- <i class="el-icon-arrow-down el-icon--right"></i> -->
                {{checkedChain}}{{$t('bosChain.bosAccount')}}
              </span>
            </div>
            <!-- 选择抵押账户所属链 @command="handleCheckChain"-->
            <!-- <el-dropdown class="accountList" style="min-width: 110px" trigger="click">
              <span class="el-dropdown-link">
                <i class="el-icon-arrow-down el-icon--right"></i>
                {{checkedChain}}{{$t('bosChain.bosAccount')}}
              </span>
              <el-dropdown-menu slot="dropdown" style="min-width: 160px;">
                <template v-for="(item, index) in chainList()">
                  <el-dropdown-item
                  :command="item.value"
                  :key="index">{{item.label}}{{$t('bosChain.bosAccount')}}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </el-dropdown> -->
            <el-input
            type="text"
            :placeholder="$t('ndxStake.supportStaking')"
            clearable
            class="accountName"
            :maxlength="12"
            v-model="stakeAccount" />
          </div>
          <div v-if="getAccount_iserror"
            class="el-form-item__error1 mb">{{$t('bosChain.accountNone', {chain: checkedChain})}}</div>
        </div>
        <el-button
          type="primary"
          style="width: 100%;"
          :loading="staking"
          :disabled="chain !== 'eos'"
          class="mortgageBtn mt" @click="handleSureStake('stake')">{{ $t('ndxStake.confirmMortgage') }}
        </el-button>
        <div class="ndxTip">
          {{ $t('ndxStake.mortgaged') }}
        </div>
        <div class="crossLinkTip mt5" v-if="chain !== 'eos'">
          · {{ chain.toUpperCase() }}
          {{ $t('ndxStake.onlyEosAccount2') }}
        </div>
        <div class="ndxDetailsBtn">
          <span @click="mortgageNdxDetails = !mortgageNdxDetails">
            {{ $t('ndxStake.situation') }}
            <i class="iconfont el-icon-arrow-down" v-if="!mortgageNdxDetails"></i>
            <i class="iconfont el-icon-arrow-up" v-else></i>
          </span>
        </div>
      </div>
      <!-- 赎回Ndx -->
      <div class="redeem" v-if="MortgageStatus === 2">
        <div class="font333" style="margin: -28px 0 30px">{{ $t('ndxStake.redeemNdx') }}</div>
        <!-- 赎回中 -->
        <div class="flexb redeemCont" v-if="chain === 'eos' && hasUnStake">
          <div class="ableUse">
            {{ $t('ndxStake.redeeming') }} {{toFixed(unstakeNumber, 4)}} NDX
          </div>
          <div>
            <span v-if="cDate.days && parseFloat(cDate.days) > 0">{{cDate.days}}Day</span>
            {{cDate.hours}}:{{cDate.minutes}}:{{cDate.seconds}}
          </div>
        </div>
        <div class="toOtherMortgage" v-if="chain === 'eos'">
          <!-- {{ $t('ndxStake.stakedForOther1') }}：
          <span v-if="stakeNumber - selfStakeNumber">{{toFixed(stakeNumber - selfStakeNumber, 4)}}</span>
          <span v-else>0.0000</span> NDX -->
          <span class="colorBlue fr"
            style="margin-bottom: -5px;"
            @click="mortgageListHidden = true;"
            v-if="(stakeNumber - selfStakeNumber)">
            {{ $t('newpos.lendingList') }}
          </span>
        </div>
        <el-input
          type="number"
          :placeholder="$t('ndxStake.redeemNumber')"
          class="mortgageNumber"
          min="0.0001"
          step="0.0001"
          clearable
          v-model="ndxStakeNumber" />
        <!-- 可赎回 -->
        <div class="flexb mt5 mb">
          <div><span class="el-form-item__error1" v-if="numberError"> ≥ {{minNdxStakeNumber}}</span>&nbsp;</div>
          <div @click="ndxStakeNumber = selfStakeNumber">
            {{ $t('myWallet.ableMortgage') }}：
            <span v-if="selfStakeNumber || selfStakeNumber === 0">
              {{toFixed(selfStakeNumber, 4)}} NDX
            </span>
            <i v-else class="el-icon-refresh el-icon-loading"></i>
          </div>
        </div>
        <el-button
          type="primary"
          :disabled="chain !== 'eos'"
          style="width: 100%;"
          :loading="staking"
          :class="{'mt': chain !== 'eos'}"
          class="mortgageBtn" @click="handleSureStake('unstake')">{{ $t('ndxStake.comfirmRedeem') }}
        </el-button>
        <div class="crossLinkTip" v-if="selfStakeNumber !== stakeOrtherNumber && (stakeOrtherNumber - selfStakeNumber)">
          {{ $t('ndxStake.cantReem', {num: toFixed(stakeOrtherNumber - selfStakeNumber, 4)}) }}
        </div>
        <div class="ndxTip">
          {{ $t('ndxStake.redeemTip') }}
        </div>
        <div class="ndxDetailsBtn">
          <span @click="mortgageNdxDetails = !mortgageNdxDetails">
            {{ $t('ndxStake.situation') }}
            <i class="iconfont el-icon-arrow-down" v-if="!mortgageNdxDetails"></i>
            <i class="iconfont el-icon-arrow-up" v-else></i>
          </span>
        </div>
      </div>
      <!-- 流通情况 -->
      <div>
        <p v-if="MortgageStatus === 3" class="center mbd"
        style="color: #278EDA; font-size: 16px;">{{ $t('ndxStake.situation') }}</p>
        <el-collapse-transition v-if="MortgageStatus !== 4">
          <div v-show="mortgageNdxDetails" class="ndxDetails">
            <p class="p-tag mt">
              {{ $t('ndxStake.situationTotal') }}
              <span>{{circulateCount}} NDX</span>
            </p>
            <p class="p-tag">
              {{ $t('ndxStake.situationAmount') }}
              <span v-if="totalStaked !== null">{{ totalStaked }}</span>
              <i v-else class="el-icon-refresh el-icon-loading"></i>
            </p>
            <p>
              {{ $t('ndxStake.situationProportion') }}
              <span v-if="totalStaked !== null">{{((parseFloat(totalStaked) / circulateCount) * 100).toFixed(4)}}%</span>
              <i v-else class="el-icon-refresh el-icon-loading"></i>
            </p>
            <p class="p-tag" style="margin-bottom: 5px;">
              {{ $t('ndxStake.totalDestruction') }}
              <span v-if="totalDestruction!==null">{{ totalDestruction }} NDX</span>
              <i v-else class="el-icon-refresh el-icon-loading"></i>
            </p>
            <p>
              {{ $t('ndxStake.destructionProportion') }}
              <span v-if="destructionRatio!==null">{{ (destructionRatio * 100).toFixed(4) }}%</span>
              <i v-else class="el-icon-refresh el-icon-loading"></i>
            </p>
            <div class="total-main">
              <p>
                {{ $t('ndxStake.repurchaseDestruction') }}
                <span v-if="buyDestroyCount!==null">{{ buyDestroyCount }} NDX</span>
                <i v-else class="el-icon-refresh el-icon-loading"></i>
              </p>
              <p>
                {{ $t('ndxStake.otherDestruction') }}
                <span v-if="otherDestroyCount!==null">{{ otherDestroyCount }} NDX</span>
                <i v-else class="el-icon-refresh el-icon-loading"></i>
              </p>
            </div>
          </div>
        </el-collapse-transition>
      </div>
    </div>
    <!-- 抵押列表 -->
    <div class="mortgageList" v-else>
      <div class="mortgageListTit">
        <i class="iconfont el-icon-arrow-left" @click="mortgageListHidden = false;"></i>
      </div>
      <div class="mortgageListCaption">{{ $t('ndxStake.stakingDetails') }}</div>
      <template v-for="(item, index) in unstakeList">
        <div class="mortgageCont" :key="index">
          <div class="mb">
            <span>{{$t('bosChain.bosAccount')}}：</span>
            <span class="font333">{{item.account}}</span>
            <span>( {{item.chain}} )</span>
          </div>
          <div>
            <div class="flexb">
              <div>
                <span>{{ $t('ndxStake.stakes') }}：</span>
                <span class="font333" @click="handleInputShowNum(item)">{{toFixed(item.number, 4)}} NDX</span>
              </div>
              <div class="colorBlue" @click="handleShowAction(item)">
                {{ $t('ndxStake.redeem') }}
                <i class="iconfont el-icon-arrow-up" v-if="item.show"></i>
                <i class="iconfont el-icon-arrow-down" v-else></i>
              </div>
            </div>
            <div class="drowDownCont" v-if="item.show">
              <div class="flexb">
                <el-input
                  type="number"
                  :placeholder="$t('ndxStake.redeemNumber')"
                  class="mortgageNumber mt0"
                  min="0.0001"
                  step="0.0001"
                  style="width: 75%;"
                  clearable
                  v-model="ndxStakeNumber" />
                <el-button
                  type="primary"
                  :disabled="chain !== 'eos'"
                  :loading="staking"
                  :class="{'mt': chain !== 'eos'}"
                  class="mortgageBtn mb0" @click="handleSureStake('unstake', item.id)">{{$t('public.sure')}}
                </el-button>
              </div>
              <div class="el-form-item__error1" v-if="item.numberError"> ≥ {{minNdxStakeNumber}}</div>
              <p class="mt">{{ $t('ndxStake.duringRedeem') }}</p>
            </div>
          </div>
        </div>
      </template>
      <div class="noData center"
      v-if="unstakeList && unstakeList.length === 0" >{{ $t('ndxStake.noNdxData') }}</div>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import axios from 'axios';
import { EosModel } from '@/utils/eos/index';
import { toFixed, countdown, chainList } from '@/utils/validate';

export default {
  data() {
    return {
      chain: 'EOS',
      staking: false, // 请求抵押/赎回中
      mortgageNdxDetails: true, // 流通情况显示隐藏
      ndxStakeNumber: null, // 抵押/赎回数量
      minNdxStakeNumber: 0.0001, // 最小抵押数量
      numberError: false,
      ndxBlance: null, // 用户ndx余额
      ndxCanStakeBlance: null, // 用户可用抵押ndx数
      totalStaked: null, // 全网抵押总量
      stakeAccount: '', // 抵押账户名
      getAccount_iserror: true, // 账户是否存在
      stakeNumber: null, // 为他人和为自己的抵押总数
      stakeOrtherNumber: null, // 他人和自己给自己的抵押总数
      selfStakeNumber: 0, // 为自己抵押数
      unstakeNumber: 0, // 用户当前赎回量
      releaseTime: null, // 赎回时间
      hasUnStake: false, // 是否有赎回
      buyDestroyCount: null, // 回购销毁
      otherDestroyCount: null, // 其他销毁
      totalDestruction: null, // 销毁总量
      circulateCount: null, // 流通总量
      destructionRatio: null, // 销毁比率
      endtime: null, // 倒计时时间
      cDate: {
        days: 0,
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      drowDownHide: false, // 抵押列表下拉信息
      mortgageListHidden: false, // 显示抵押列表
      active: 0,
      activeList: [
        {
          value: 0,
          label: this.$t('ndxStake.stakeThisAccount'),
        },
        {
          value: 1,
          label: this.$t('ndxStake.stakeOtherAccount'),
        }
      ],
      checkedChain: 'EOS',
      unstakeList: [], // 给他人抵押的列表
    }
  },
  components: {
  },
  props: {
    MortgageStatus: {
      type: Number,
      default: 0
    },
    mortgageNdxVisible: {
      type: Boolean,
      default: false
    },
    showList: Number
  },
  watch: {
    '$store.state.app.language': function change() {
      this.activeList = [
        {
          value: 0,
          label: this.$t('ndxStake.stakeThisAccount'),
        },
        {
          value: 1,
          label: this.$t('ndxStake.stakeOtherAccount'),
        }
      ];
    },
    mortgageNdxVisible: function change(val) {
      if (val) {
        if (this.showList) {
          this.mortgageListHidden = true;
        } else {
          this.mortgageListHidden = false;
        }
        this.active = 0;
        this.handleBlanceIvit();
        this.handleMortgageNdxDetails();
        this.handleGetStakexInfo('stat');
        if (!this.totalStaked && this.chain === 'eos') {
          this.handleGetStakexInfo('stake');
        }
        return;
      }
      setTimeout(() => {
        this.mortgageNdxDetails = true;
      }, 100);
      if (this.countdownTimer) { // 结束倒计时
        clearInterval(this.countdownTimer);
      }
      this.cDate = {
        days: 0,
        hours: '00',
        minutes: '00',
        seconds: '00'
      };
      this.releaseTime = null;
      this.ndxStakeNumber = null;
    },
    ndxStakeNumber: function change(val) {
      if (val > 0 || val === null) {
        this.numberError = false;
      }
    },
    '$store.state.app.scatter.chain': function listen(val) {
      this.chain = val;
    },
    mortgageListHidden: function change() {
      this.numberError = false;
      this.ndxStakeNumber = null;
    }
  },
  created() {
  },
  mounted() {
    this.handleMortgageNdxDetails();
    this.handleBlanceIvit();
    this.handleGetStakexInfo('stat');
    const scatter = this.$store.state.app.scatter;
    this.chain = scatter.chain || 'EOS';
    this.stakeAccount = scatter && scatter.identity ? scatter.identity.accounts[0].name : '';
    if (this.showList) {
      this.mortgageListHidden = true;
    }
  },
  methods: {
    // NDX抵押stake / 赎回unstake
    handleSureStake(name, id) {
      const scat = this.$store.state.app.scatter;
      const n = Number(toFixed(this.ndxStakeNumber, 4));
      if (n <= 0 && !id && id !== 0) {
        // this.ndxStakeNumber = 0.0001;
        this.numberError = true;
        return;
      }

      this.numberError = false;
      // 其他钱包下单
      if (scat.wallet !== 'Scatter'
      && scat.wallet !== 'Scatter-Desktop'
      && scat.wallet !== 'Ironman'
      && scat.wallet !== 'cloudWallet'
      ) {
        // 显示二维码弹窗
        this.$emit('listenStakeAction', 'stakePay');
        return;
      }
      // 抵押
      if (name === 'stake') {
        if (!this.ndxCanStakeBlance) {
          this.$message.error(this.$t('ndxStake.ndxTip3'));
          return;
        }
        if (!this.ndxCanStakeBlance || parseFloat(this.ndxCanStakeBlance) < n) { // 抵押过滤判断
          this.$message.error(this.$t('ndxStake.ndxTip3'));
          return;
        }
        if (this.active) {
          if (!this.stakeAccount) {
            this.$message.error(this.$t('bosChain.pleaseInputAccount'));
            return;
          }
          this.handleValidateReceive().then((res) => {
            if (res) {
              this.getAccount_iserror = false;
              this.handleStakeAction(name, n);
              return;
            }
            this.getAccount_iserror = true;
          })
          return;
        }
        this.checkedChain = this.chain.toUpperCase() === 'EOS' ? 'EOS' : 'EOS'; // 抵押所属链
        this.stakeAccount = this.$store.state.app.scatter.identity.accounts[0].name;
        this.handleStakeAction(name, n);
      }
      // 赎回
      if (name === 'unstake') {
        this.stakeAccount = this.$store.state.app.scatter.identity.accounts[0].name;
        if (id || id === 0) {
          if (!n && n !== 0) {
            this.$message.error(this.$t('ndxStake.redeemNumber'));
            return;
          }
          if (n <= 0) {
            // this.$message.error(`≥ ${this.minNdxStakeNumber}`);
            this.unstakeList.find(v => v.id === id).numberError = true;
            return;
          }
          if (parseFloat(this.unstakeList.find(v => v.id === id).number) < n) { // 赎回过滤判断
            this.$message.error(this.$t('ndxStake.ndxTip2'));
            return;
          }
          this.unstakeList.find(v => v.id === id).numberError = false;
        } else if (!n) {
          this.$message.error(this.$t('ndxStake.redeemNumber'));
          return;
        }
        // if (!this.selfStakeNumber || parseFloat(this.selfStakeNumber) < n) { // 赎回过滤判断
        //   this.$message.error(this.$t('ndxStake.ndxTip2'));
        //   return;
        // }
        // }
        this.handleStakeAction(name, n, id);
      }
    },
    // NDX 抵押stake / 赎回unstake --- Action
    handleStakeAction(name, n, id) {
      if (this.staking) return;
      this.staking = true;
      let chain = this.checkedChain; // 抵押所属链
      let stakeAccount = this.stakeAccount; // 抵押账号
      if (id || id === 0) {
        const info = this.unstakeList.find(v => v.id === id);
        if (info) {
          chain = info.chain;
          stakeAccount = info.account;
        }
      } else if (name === 'unstake') {
        chain = this.chain;
      }
      const params = {
        quantity: `${toFixed(n, 4)} NDX`,
        name,
        chain: chain.toLowerCase(),
        stakeAccount
      };
      EosModel.newdexStakex(params, (res) => {
        this.staking = false;
        let msg = `${this.$t('myWallet.diyaSuccess')}!`;
        if (name === 'unstake') {
          msg = this.$t('ndxStake.redeemSuccess');
        }
        if (res.processed) { // 合约操作成功
          this.messageclose = this.$message.success(msg);
          setTimeout(() => {
            this.handleGetStakexInfo('stake');
          }, 100);
          if (name === 'unstake') {
            this.$emit('listenUpdateData');
          }
          // this.$emit('listenStakeAction', 'close');
          return
        }
        EosModel.handleScatterErrorBack(res);
      })
    },
    // 余额获取
    handleBlanceIvit() {
      const scat = this.$store.state.app.scatter;
      if (scat && scat.identity && scat.chain === 'eos') {
        EosModel.getCurrencyBalance('NDX', 'newdexissuer', (result) => {
          if (result.error) return;
          let res = result;
          if (!res) return;
          if (res.length === 0) {
            res = '0.0000 NDX';
          } else {
            res = result[0];
          }
          this.ndxBlance = res;
          this.handleGetStakexInfo('stake');
        });
        return;
      }
      this.stakeOrtherNumber = 0;
      this.ndxCanStakeBlance = 0;
    },
    // NDX抵押数stake / 赎回数unstake / 抵押总数stat
    handleGetStakexInfo(name) {
      const params = {
        name,
        actor: name === 'stat' ? 'NDX' : 'account',
        chain: this.chain
      }

      // 抵押表
      EosModel.newdexStakexInfo(params, (res) => {
        if (res.rows) {
          if (name === 'stake') {
            if (res.rows) {
              const item = res.rows.find(v => v.blockchain === this.chain);
              if (item) {
                this.stakeNumber = (Number(res.rows[0].staked_to_others) + Number(res.rows[0].self_staked)) / 10000;
                this.selfStakeNumber = Number(res.rows[0].self_staked) / 10000;
                this.stakeOrtherNumber = Number(res.rows[0].total_staked) / 10000;
              } else {
                this.stakeNumber = '0.0000 NDX';
                this.selfStakeNumber = 0;
                this.stakeOrtherNumber = 0;
              }
              this.unstakeNumber = res.rows[0] ? Number(res.rows[0].refunding) / 10000 : '0.0000 NDX';
              this.releaseTime = res.rows[0] ? res.rows[0].release_time : '';
              const scat = this.$store.state.app.scatter;
              if (scat && scat.identity) {
                this.handleHasUnStake();
              }
            }
            if (this.chain === 'eos') {
              this.handleGetStakexInfo('stakeddetail');
            } else {
              this.ndxCanStakeBlance = 0;
            }
          }
          if (name === 'stakeddetail') {
            const list = res.rows;
            this.unstakeList = [];
            list.forEach((v) => {
              const vv = v;
              vv.id = v.detail_id;
              vv.account = v.stakefor;
              vv.chain = v.blockchain.toUpperCase();
              vv.number = v.amount / 10000;
              vv.show = false;
              vv.numberError = false;
              this.unstakeList.push(vv);
            });
          }
          if (name === 'stat') { // 抵押总数
            this.totalStaked = res.rows[0] ? res.rows[0].total_staked : '0.0000 NDX';
          }
        }
      });
    },
    // 该用户是否有赎回中
    handleHasUnStake() {
      const zone = moment().zone() / 60; // 时区
      let shTime = moment(this.releaseTime).add(0 - zone, 'hours').format('YYYY/MM/DD HH:mm:ss'); // 赎回时间
      this.endtime = shTime; // 更新倒计时
      shTime = new Date(shTime).getTime();
      const bdTime = new Date().getTime();
      const flg = bdTime - shTime;
      this.hasUnStake = flg <= 0;
      this.cDate.total = null;
      if (this.hasUnStake && this.MortgageStatus === 2) {
        this.handleCountdownStart();
      }
      this.handleCanStake();
    },
    // 可抵押计算
    handleCanStake() {
      // 余额 - 已抵押 - 赎回中
      const ndxblance = parseFloat(this.ndxBlance);
      const stakeNumber = parseFloat(this.stakeNumber);
      // 在抵押
      // const unstakeNumber = this.hasUnStake ? parseFloat(this.unstakeNumber) : 0;
      // this.ndxCanStakeBlance = ndxblance - stakeNumber - unstakeNumber;
      this.ndxCanStakeBlance = ndxblance - stakeNumber;
    },
    // 显示详情Ndx流通情况
    handleMortgageNdxDetails() {
      this.$http.get('/ndx/info').then((res) => {
        if (res.code !== 0) {
          // this.$message.error(res.msg);
          return;
        }
        const destoryData = res.data;
        this.buyDestroyCount = parseFloat(destoryData.buyDestroyCount);
        this.otherDestroyCount = parseFloat(destoryData.otherDestroyCount);
        this.circulateCount = parseFloat(destoryData.circulateCount); // 流通总量
        this.totalDestruction = this.buyDestroyCount + this.otherDestroyCount; // 销毁总量
        this.destructionRatio = this.totalDestruction / this.circulateCount; // 销毁总量 除与 流通总量 === 销毁比率
      });
    },
    // 开始倒计时
    handleCountdownStart() {
      this.countdownTimer = setInterval(() => {
        this.handleCountdown()
      }, 1000);
    },
    handleCountdown() {
      if (this.cDate.total <= 0 && this.cDate.total !== null) {
        clearInterval(this.countdownTimer);
        // 倒计时结束
        // console.log('time over');
        this.open = true;
        this.hasUnStake = false;
        return;
      }
      this.cDate = countdown(this.endtime);
    },
    // 为自己为他人抵押 切换
    handleActiveAction(item) {
      this.active = item.value;
      this.getAccount_iserror = false;
      if (this.active === 0) {
        this.checkedChain = 'EOS'; // 抵押所属链
        this.stakeAccount = this.$store.state.app.scatter.identity.accounts[0].name;
        return;
      }
      this.stakeAccount = '';
    },
    // 账户选择
    // handleCheckChain(val) {
    //   this.checkedChain = val;
    //   this.stakeAccount = '';
    //   this.getAccount_iserror = false;
    // },
    // 验证账户是否存在
    async handleValidateReceive() {
      const nodeChecked = this.$store.state.app.nodeChecked;
      const nodeobj = nodeChecked[this.checkedChain.toLowerCase()];
      const kip = nodeobj.url;
      const accountParams = {
        account_name: this.stakeAccount
      };
      const back = await axios.post(`${kip}/v1/chain/get_account`, JSON.stringify(accountParams)).then((result) => {
        if (result.status !== 200) return false;
        return true;
      }).catch(() => false);
      return back;
    },
    // 赎回列表中 点击赎回现实赎回操作
    handleShowAction(item) {
      this.numberError = false;
      this.ndxStakeNumber = null;
      const info = this.unstakeList.find(v => v.id === item.id)
      if (info && info.show) {
        info.show = false;
        info.numberError = false;
        return;
      }
      this.unstakeList.forEach((val) => {
        const v = val;
        v.show = false;
        v.numberError = false;
        if (v.id === item.id) {
          v.show = true;
        }
      });
    },
    // 抵押列表点击数量输入框直接输入数量
    handleInputShowNum(item) {
      if (item.show) {
        this.ndxStakeNumber = this.toFixed(item.number, 4)
      }
    },
    // 链列表
    chainList() {
      return chainList();
    },
    toFixed(val, n) {
      return toFixed(val, n)
    },
    getSum(total, num) {
      return total + num;
    }
  },
}
</script>

<style scoped lang="scss">
@import '@/views/myWallet/user.scss';
@import '@/assets/css/variables.scss';
@import '@/views/myWallet/eosResource/resource.scss';

$-color333: #333;
$white: rgba(255, 255, 255, 0.6) !important;

.colorBlue {
  color: $-btn-skyblue;
  cursor: pointer;
}

.font333 {
  color: $-color333 !important;
}

.font999 {
  color: #999 !important;
}

.mortgageNdx {
  .font333 {
    color: $-color333 !important;
  }
  .mortgageNumber {
    margin-top: 6px;
  }
  .ableUse {
    text-align: right;
    margin: 5px 0 5px;
  }
  .mortgageBtn {
    margin-bottom: 10px;
  }
  .ndxDetailsBtn {
    text-align: left;
    color: #278EDA;
    margin-top: 20px;
    span {
      cursor: pointer;
    }
  }
  .ndxDetails {
    padding-left: 10px;
    p {
      span {
        color: $-color333;
      }
      margin-bottom: 20px;
    }
    p:nth-child(2) {
      margin-bottom: 5px;
    }
    .p-tag {
      position: relative;
      &::before {
        position: absolute;
        content: '';
        display: block;
        width: 3px;
        height: 14px;
        background: #278EDA;
        left: -7px;
        top: 50%;
        margin-top: -6px;
      }
    }
    .total-main {
      border: 1px solid #BBB;
      padding:11px 0 11px 15px;
      p {
        margin-bottom: 0;
      }
      p:nth-child(1) {
        margin-bottom: 10px;
      }
    }
  }
}

.mortgageTabs {
  background: #F4F4F4;
  padding: 6px 14px;
  margin: -15px 0 5px 0;

  .tab {
    width: 45%;
    text-align: center;
    line-height: 26px;
    cursor: pointer;

    &.active {
      background: #278EDA;
      color: #fff;
      border-radius: 5px;
    }
  }
}

.crossLinkTip {
  color: #D79638;
  margin-bottom: 5px;
}

.el-form-item__error {
  position: relative;
  padding-top: 0;
  margin-top: -3px;
  font-size: 14px;
  padding-left: 15px;
}

.el-form-item__error1 {
  margin-top: 5px;
  color: #f56c6c;
}

.accountList {
  min-width: 120px;
  padding: 0 5px 0 10px;
  line-height: 40px;
  margin-right: 10px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;

  .el-dropdown-link.el-dropdown-selfdefine {
    display: inline-block;
    width: 100%;

    .el-icon-arrow-down.el-icon--right {
      float: right;
      margin-top: 13px;
    }
  }
}

.redeem {
  .redeemCont {
    padding: 7px 13px;
    background: #FFF8EE;
    color: #D79638;
    margin-bottom: 30px;
    margin-top: -15px;

    .ableUse {
      margin: 0;
    }
  }
  .toOtherMortgage {
    line-height: 34px;
    margin-top: -25px;
  }
}

.mortgageList {
  margin-top: -30px;
  height: 600px;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 15px;
  }
  /*定义滚动条的轨道，内阴影及圆角*/
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    border-radius: 0;
    background-color: rgba(0, 0, 0, 0);
    border-radius: 15px;
  }
  /*定义滑块，内阴影及圆角*/
  &::-webkit-scrollbar-thumb {
    /*width: 10px;*/
    /*height: 25px;*/
    -webkit-box-shadow: inset 0 0 0 rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
  }

  .noData {
    padding-top: 220px;
  }

  .mortgageListTit {
    i {
      font-size: 24px;
      color: #000;
      cursor: pointer;
    }
  }

  .mortgageListCaption {
    color: #000;
    margin: 14px 0 7px;
  }

  .mortgageCont {
    padding: 17px 11px;
    margin-bottom: 10px;
    background: #F4F4F4;

    .drowDownCont {
      margin-top: 10px;
    }
  }
}

.theme-1B1D27 {
  .mortgage, .redeem {
    .font333, .font999 {
      color: $white;
    }
  }

  .mortgageTabs, .mortgageCont {
    background: $-black1;

    .font333, .font999 {
      color: rgba(255, 255, 255, 0.6) !important;
    }
  }

  .mortgageListCaption, .mortgageListTit i {
    color: rgba(255, 255, 255, 0.6);
  }

  .ndxDetails {
    span {
      color: $white;
    }
  }
}
</style>
